<template>
  <div class="layout">

    <Card title="Render函数之Table单元格加入EChart图表">
      <Table
        :columns="pictureColumn"
        :data="pictureData"
        stripe border
        ref="table"
      ></Table>
    </Card>

  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "table-render-echarts",
  data() {
    return {
      // EChart数据列
      pictureColumn: [
        {
          key: 'pictureType',
          title: '类型',
          width: 200,
          align: 'center'
        },
        {
          title: '比例图',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('canvas', {
                style: {
                  height: '300px',
                  margin: '0',
                  padding: '0'
                },
                on: {},
                attrs: {
                  // 给单元格设置ID和类型
                  id: params.row.pictureType
                }
              })
            ])
          }
        }
      ],
      pictureData: [
        {
          pictureType: '柱形图',
          data: {}
        },
        {
          pictureType: '饼图',
          data: {}
        },
        {
          pictureType: '散点图',
          data: {}
        }
      ],
    }
  },
  created() {
    this.$nextTick(() => {
      // 重新渲染导航
      this.pictureData.forEach((value, index) => {
        this.paintChart(index, value)
      })
    })
  },
  methods: {
    // 绘制图表
    paintChart(i, params) {
      if (params.pictureType === '柱形图') {
        let chart = echarts.init(document.getElementById(params.pictureType));
        let option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: '4%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        };
        chart.setOption(option)
      } else if (params.pictureType === '饼图') {
        let chart = echarts.init(document.getElementById(params.pictureType));
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          grid: {
            top: '4%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        chart.setOption(option)
      } else if (params.pictureType === '散点图') {
        let chart = echarts.init(document.getElementById(params.pictureType));
        let option = {
          xAxis: {},
          yAxis: {},
          series: [{
            symbolSize: 2,
            grid: {
              top: '4%',
              left: '1%',
              right: '1%',
              bottom: '1%',
              containLabel: true
            },
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68]
            ],
            type: 'scatter'
          }]
        }
        chart.setOption(option)
      }
    }
  }

}
</script>

<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow-y: scroll;
  height: 100%;
}
</style>
